<template>
	<view class="blogItem" :animation="animateData" style="opacity: 0;transform: scale(0.8);">
		<view class="box"></view>
		<view class="container">
			<view class="blogItemBox"><image :src="imageFromWay" class="blogimg" @tap="GoBlogList"></image></view>
			<view class="detail">
				<view>
					<text class="title">{{ $attrs.title }}</text>
				</view>
				<view>
					<text class="time">{{ $attrs.time | format }}</text>
				</view>
				<view class="goodBox" @tap="addGoodNum">
					<view>
						<text class="iconfont icondianzan good"></text>
						<view class="goodNum">{{ goodNum }}</view>
					</view>
				</view>
			</view>
			<view class="labelBox">
				<view class="zhanwei"></view>
				<view>
				</view>
				<Bloglabel :way="$attrs.way" class="blogLabel"></Bloglabel>
				<view class="seeNum">
					<text class="iconfont iconyanjing"></text>
					{{ $attrs.seeNum }}
				</view>
			</view>
		</view>
		<view class="box"></view>
	</view>
</template>

<script>
	import animate from "../../animate.js"
import { formatTime } from '../../formatTime.js';
import Bloglabel from '../../components/label/label.vue';
import text from '../../glob.js';
export default {
	components: {
		Bloglabel,
	},
	data() {
		return {
			flag: true,
			goodNum:this.$attrs.goodNum
		};
	},
	mounted() {
		this.fadeInScale()
	},
	mixins:[animate.mixin],
	computed: {
		imageFromWay() {
			switch (this.$attrs.way) {
				case 'js':
					return '../../static/img/js.jpg';
					break;
				case 'vue':
					return '../../static/img/vue.jpg';
					break;
				case 'node':
					return '../../static/img/node.jpg';
					break;
				case 'css':
					return '../../static/img/css.jpg';
					break;
				case '随笔':
					return '../../static/img/suibi.jpg';
					break;
				case '其他':
					return '../../static/img/learn.jpg';
					break;
			}
		}
	},
	filters: {
		format(val) {
			return formatTime(parseInt(val));
		}
	},
	methods: {
		addGoodNum() {
			if (this.flag) {
				this.flag = false;
				uni.request({
					method:"post",
					url:"https://www.ttzxh.icu:443/api/blog/goodNum",
					data:{
						id: this.$attrs.id,
						goodNum: this.$attrs.goodNum + 1
					},
					success: (res) => {
						if(res.data.error===-1){
							this.goodNum = this.goodNum + 1;
						}else{
							//错误提示
							this.$emit("failGood")
						}
					},
					 fail: () => {
					 	//稍后再试
						this.$emit("failGood")
					 }
				})
			}
			setTimeout(() => {
				this.flag = true;
			}, 100000);
		},
		GoBlogList() {
			uni.request({
				method:"post",
				url:"https://www.ttzxh.icu:443/api/blog/seeNum",
				data:{
					id:this.$attrs.id,
					seeNum:this.$attrs.seeNum+1
				},
				complete: () => {
					text.setText(this.$attrs);
					uni.navigateTo({
						url: '/pages/index/blog?goodNum='+this.$attrs.goodNum+"&id="+this.$attrs.id
					});
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.shanchu{
		color: red;
	}
.blogItem {
	background-color: rgba(21,23,23,.5);
	margin: 15px 0;
	.box {
		width: 100%;
		height: 2px;
		background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.1) -4%, #000 50%, rgba(255, 255, 255, 0.1) 100%);
	}
	.container {
		position: relative;
		display: flex;
		justify-content: space-around;
		width: 100%;
		overflow: hidden;
		.blogItemBox {
			display: flex;
			justify-content: center;
			align-items: center;
			.blogimg {
				opacity: .9;
				border-radius: 30upx;
				flex-basis: 200upx;
				width: 200upx;
				height: 200upx;
			}
		}

		.detail {
			box-sizing: border-box;
			padding: 10px 5px 30px 5px;
			text-align: center;
			flex-basis: 470upx;
			width: 500upx;
			font-size: 15px;
			overflow: hidden;
			.title {
				color: #fff;
				letter-spacing: 1px;
				margin: 25px;
				font-size: 20px;
				font-weight: 900;
			}
			.time {
				color: #B2BAC2;
				font-size: 11px;
				font-weight: 100;
				line-height: 11px;
			}
			.goodBox {
				margin-top: 5px;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				width: 110upx;
				height: 110upx;
				border-radius: 50%;
				border: 1px solid #333;
				transition: all 0.3s;
				.good {
					font-size: 20px;
					color: $uni-bg-color-blue;
				}
				&:active {
					.good {
						color: pink;
					}
					border: 1px solid pink;
					transform: scale(1.3);
				}
			}
		}
		.labelBox {
			height: 15px;
			width: 100%;
			position: absolute;
			overflow: hidden;
			bottom: 5px;
			right: 0px;
			display: flex;
			justify-content: center;
			.zhanwei{
				flex-basis: 300upx;
			}
			.seeNum {
				font-size: 15px;
				vertical-align: top;
				margin-left: 15px;
				line-height: 15px;
				.iconyanjing {
					margin: 0 5px;
				}
			}
		}
	}
}
</style>
